<template>
	<div>
		<div class="pl-[20px] pr-[20px]">
			<el-card class="!border-none pt-4" shadow="never">
				<el-form class="ls-form el-set-form" :model="formData" inline>
					<el-form-item label="时间">
						<el-time-picker v-model="formData.Number" is-range range-separator="To"
							start-placeholder="开始时间" end-placeholder="结束时间" />
					</el-form-item>
					<el-form-item label="" class="v-flex">
						<el-button>本日</el-button>
						<el-button>本月</el-button>
						<el-button>本季度</el-button>
						<el-button>本年</el-button>
					</el-form-item>
					<el-form-item>
						<el-button class="main-color1 w-[76px]">重置</el-button>
						<el-button class="w-[76px]" type="primary" color="#0054A6">查询</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-row class="mt-[20px]">
				<el-col :span="4" class="bg-white p-4 main-color">
					<div class="v-flex v-row-between">
						<div>总销售额</div>
						<img src="@/assets/images/financeIcon1.png" class="w-[40px] h-[40px]"/>
					</div>
					<div class="mt-[10px] font-bold" style="font-size: 24px;">2,130,000</div>
				</el-col>
				<el-col :span="4" class="bg-white p-4 main-color ml-[30px]">
					<div class="v-flex v-row-between">
						<div>应收款</div>
						<img src="@/assets/images/financeIcon2.png" class="w-[40px] h-[40px]"/>
					</div>
					<div class="mt-[10px] font-bold" style="font-size: 24px;">2,130,000</div>
				</el-col>
				<el-col :span="4" class="bg-white p-4 main-color ml-[30px] ">
					<div class="v-flex v-row-between">
						<div>应付款</div>
						<img src="@/assets/images/financeIcon3.png" class="w-[40px] h-[40px]"/>
					</div>
					<div class="mt-[10px] font-bold" style="font-size: 24px;">2,130,000</div>
				</el-col>
				<el-col :span="4" class="bg-white p-4 main-color ml-[30px]">
					<div class="v-flex v-row-between">
						<div>毛利润</div>
						<img src="@/assets/images/financeIcon4.png" class="w-[40px] h-[40px]"/>
					</div>
					<div class="mt-[10px] font-bold" style="font-size: 24px;">2,130,000</div>
				</el-col>
				<el-col :span="4" class="bg-white p-4 main-color ml-[30px]">
					<div class="v-flex v-row-between">
						<div>毛利率</div>
						<img src="@/assets/images/financeIcon5.png" class="w-[40px] h-[40px]"/>
					</div>
					<div class="mt-[10px] font-bold" style="font-size: 24px;">2,130,000</div>
				</el-col>
			</el-row>
			<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
				<div class="v-flex v-row-between">
					<div class=" font-bold main-color" style="font-size: 16px;">销售业绩排名</div>
					<div  class="v-flex">
						<el-button>业绩完成比排名</el-button>
						<el-button>实时业绩排名</el-button>
					</div>
				</div>
				<el-table class="mt-[20px]" size="large" :data="lists"
					:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
					:cell-style="{'color':'#0054A6','padding':'20px 0'}"> 
					<el-table-column label="排名" prop="type" align="center" />
					<el-table-column label="销售姓名" prop="上海AAAA有限公司" align="center" />
					<el-table-column label="年度业绩" prop="王小明" align="center" />
					<el-table-column label="已完成业绩" prop="王小明" align="center" />
					<el-table-column label="已完成业绩比" prop="王小明" align="center" />
				</el-table>
				<div class="p-[20px] v-flex v-row-right">
					<el-pagination color="#0054A6" background layout="prev, pager, next" :default-page-size="6"
						:total="1000" :pager-count="6" />
				</div>
			</el-card>
		</div>
	</div>
</template>

<script lang="ts" setup>
	const formData = reactive({
		Number: '',
		type: '',
	})
	const options = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		},
	])
	const lists = ref<Array<any>>([
		{ type: '出库单' }, { type: '入库单' }, { type: '出库单' }
	])
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label {
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}

	.el-set-form:deep() .el-input__inner {
		height: 36px;
	}

	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}

	:deep() .el-dialog__title {
		color: var(--el-text-color-main);
	}

	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
</style>